<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="上单商品数" :total="TodayTopInfoData.top_user_info.num">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend
              :flag="TodayTopInfoData.top_user_info.bz_num > TodayTopInfoData.top_user_info.sz_num ? 'up' : 'down'"
              style="margin-right: 16px;"
            >
              <span slot="term">周同比</span>
              {{ TodayTopInfoData.top_user_info.week_bl }}%
            </trend>
            <trend :flag="TodayTopInfoData.top_user_info.num > TodayTopInfoData.top_user_info.zr_num ? 'up' : 'down'">
              <span slot="term">日同比</span>
              {{ TodayTopInfoData.top_user_info.today_bl }}%
            </trend>
          </div>
          <template slot="footer">
            <div style=" display: flex;justify-content: space-between;align-content: center;">
              <div>
                本月
                <span>{{ TodayTopInfoData.top_user_info.month_num | NumberFormat }}</span>
              </div>
              <div>
                总数
                <span>{{ TodayTopInfoData.top_user_info.month_num.top_all_num | NumberFormat }}</span>
              </div>
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="转链商品数" :total="TodayTopInfoData.goods_num.jr_count">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend
              :flag="TodayTopInfoData.goods_num.bz_count > TodayTopInfoData.goods_num.sz_count ? 'up' : 'down'"
              style="margin-right: 16px;"
            >
              <span slot="term">周同比</span>
              {{ TodayTopInfoData.goods_num.week_bl }}%
            </trend>
            <trend :flag="TodayTopInfoData.goods_num.jr_count > TodayTopInfoData.goods_num.zr_count ? 'up' : 'down'">
              <span slot="term">日同比</span>
              {{ TodayTopInfoData.goods_num.week_bl }}%
            </trend>
          </div>
          <template slot="footer">
            <div style=" display: flex;justify-content: space-between;align-content: center;">
              <div>
                本月
                <span>{{ TodayTopInfoData.goods_num.month_count | NumberFormat }}</span>
              </div>
              <div>
                总数
                <span>{{ TodayTopInfoData.goods_num.all_num | NumberFormat }}</span>
              </div>
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="商品领券量" :total="TodayTopInfoData.goods_coupon.today_num">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend
              :flag="TodayTopInfoData.goods_coupon.bz_num > TodayTopInfoData.goods_coupon.sz_num ? 'up' : 'down'"
              style="margin-right: 16px;"
            >
              <span slot="term">周同比</span>
              {{ TodayTopInfoData.goods_coupon.week_bl }}%
            </trend>
            <trend
              :flag="TodayTopInfoData.goods_coupon.today_num > TodayTopInfoData.goods_coupon.zr_num ? 'up' : 'down'"
            >
              <span slot="term">日同比</span>
              {{ TodayTopInfoData.goods_coupon.today_bl }}%
            </trend>
          </div>
          <template slot="footer">
            <div style=" display: flex;justify-content: space-between;align-content: center;">
              <div>
                本月
                <span>{{ TodayTopInfoData.goods_coupon.month_num | NumberFormat }}</span>
              </div>
              <div>
                总数
                <span>{{ TodayTopInfoData.goods_coupon.all_num | NumberFormat }}</span>
              </div>
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="活跃用户数" :total="TodayTopInfoData.user_info[0].today_num">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend
              :flag="TodayTopInfoData.user_info[0].bz_num > TodayTopInfoData.user_info[0].sz_num ? 'up' : 'down'"
              style="margin-right: 16px;"
            >
              <span slot="term">周同比</span>
              {{ TodayTopInfoData.user_info[0].week_bl }}%
            </trend>
            <trend
              :flag="TodayTopInfoData.user_info[0].today_num > TodayTopInfoData.user_info[0].zr_num ? 'up' : 'down'"
            >
              <span slot="term">日同比</span>
              {{ TodayTopInfoData.user_info[0].today_bl }}%
            </trend>
          </div>
          <template slot="footer">
            <div style=" display: flex;justify-content: space-between;align-content: center;">
              <div>
                总数
                <span>{{ TodayTopInfoData.user_info[0].all_num | NumberFormat }}</span>
              </div>
            </div>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData" title="销售额排行" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="访问量" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData2" title="销售额趋势" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
            <!-- <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
              <a class="ant-dropdown-link" href="#">
                <a-icon type="ellipsis" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">操作一</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">操作二</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown> -->
            <div slot="extra">
              <div>
                <a-radio-group defaultValue="1" v-model="classPro" @change="doclasschange(classPro)">
                  <a-radio-button value="1">今日</a-radio-button>
                  <a-radio-button value="2">昨日</a-radio-button>
                  <a-radio-button value="3">本周</a-radio-button>
                  <a-radio-button value="4">上周</a-radio-button>
                  <a-radio-button value="5">本月</a-radio-button>
                  <a-radio-button value="6">上月</a-radio-button>
                  <a-radio-button value="7">半年</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <a-row :gutter="68">
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                <number-info :total="12321" :sub-total="17.1">
                  <span slot="subtitle">
                    <span>搜索用户数</span>
                    <a-tooltip title="指标说明" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                </div>
              </a-col>
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                <number-info :total="2.7" :sub-total="26.2" status="down">
                  <span slot="subtitle">
                    <span>人均搜索次数</span>
                    <a-tooltip title="指标说明" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                </div>
              </a-col>
            </a-row>
            <div class="ant-table-wrapper">
              <a-table
                :row-key="searchData=>searchData.id"
                size="small"
                :columns="searchTableColumns"
                :dataSource="searchData"
                @change="handleTableChange"
                :pagination="pagination"
              >
                <span slot="range" slot-scope="text, record">
                  <trend :flag="record.status === 0 ? 'up' : 'down'">{{ text }}%</trend>
                </span>
              </a-table>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card
            class="antd-pro-pages-dashboard-analysis-salesCard"
            :loading="loading"
            :bordered="false"
            title="商品分类占比"
            :style="{ height: '100%' }"
          >
            <div slot="extra">
              <div class="analysis-salesTypeRadio">
                <a-radio-group defaultValue="1" v-model="classPro" @change="doclasschange(classPro)">
                  <a-radio-button value="1">今日</a-radio-button>
                  <a-radio-button value="2">昨日</a-radio-button>
                  <a-radio-button value="3">本周</a-radio-button>
                  <a-radio-button value="4">上周</a-radio-button>
                  <a-radio-button value="5">本月</a-radio-button>
                  <a-radio-button value="6">上月</a-radio-button>
                  <a-radio-button value="7">半年</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <h4>商品分类占比</h4>
            <div>
              <!-- style="width: calc(100% - 240px);" -->
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" data-key="item*percent" />
                  <v-axis />
                  <!-- position="right" :offsetX="-140" -->
                  <v-legend data-key="item" />
                  <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { getTodayTopInfo, getClassProportion, searchGoodsWord, searchStatistics } from '@/api/data'
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment()
      .add(i, 'days')
      .format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }
]
const searchData = []
const searchTableColumns = [
  {
    dataIndex: 'index',
    title: '排名',
    width: 90,
      customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    dataIndex: 'search_name',
    title: '搜索关键词'
  },
  {
    dataIndex: 'num',
    title: '搜索用户数量'
  },
  {
    dataIndex: 'count',
    title: '搜索次数',
    align: 'right'
    // sorter: (a, b) => a.count - b.count
    // scopedSlots: { customRender: 'count' }
  }
]

const DataSet = require('@antv/data-set')

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      pagination: {
        pageSize: 5,
        page: 1
      },
      classPro: '1', // 分类占比
      loading: false,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchTableColumns,
      searchData,

      barData,
      barData2,

      //
      sourceData: [],
      pieScale: [
        {
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }
      ],
      pieData: [],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          }
        }
      ],
      serveNum: '',
      getTodayTopInfo,
      TodayTopInfoData: {
        top_user_info: {
          num: 0, // 今日用户上单商品数
          month_num: 5, // 本月上单数
          top_all_num: 8, // 总上单数
          today_bl: 1, // 日同比
          week_bl: 1 // 周同比
        },
        goods_num: {
          jr_cout: 0, // 今日转链商品数
          month_count: 1, // 本月转链商品数
          all_num: 1, // 转链商品总数
          today_bl: 1, // 日同比
          week_bl: 1 // 周同比
        },
        goods_coupon: {
          today_num: '0', // 今日商品领券量
          month_num: '0', // 本月商品领券量
          all_num: '0', // 商品领券总量
          today_bl: 0, // 日同比
          week_bl: 1 // 周同比
        },
        user_info: [
          {
            today_num: 1, // 今日活跃用户数
            all_num: 2, // 用户总数
            today_bl: 0, // 日同比
            week_bl: 1 // 周同比
          }
        ]
      }
    }
  },

  created () {
    /* setTimeout(() => {
      this.loading = !this.loading
    }, 1000) */
    this.TodayTopInfo()
    this.getClassProportion(1)
    // this.searchGoodsWord(5)
    this.searchStatistics(1, 5)
  },
  methods: {
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.loading = true
      this.searchStatistics(params.page, 5)
    },
    // 关键词统计//表格
    searchStatistics (page, pagesize) {
      searchStatistics({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code === 200) {
            console.log('关键词返回', res)
            this.searchData = res.data.data
            // this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 热搜关键词分类接口统计
    searchGoodsWord (type) {
      searchGoodsWord({
        type: type // 1日，2昨日，3本周，4上周，5本月
      })
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            console.log('热搜关键词', res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    doclasschange (val) {
      // console.log(val)
      this.getClassProportion(val)
    },
    // 获取分类占比
    getClassProportion (type) {
      getClassProportion({
        type: type // 1今日，2昨日，3本周，4上周，5本月，6上月，7半年
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('分类占比返回', res.data)
            this.sourceData = [
              { item: '在线商品', count: res.data.on_line_goods_num * 100 },
              { item: '商品转链', count: res.data.zl_num * 100 },
              { item: '商品销量', count: res.data.goods_xl * 100 },
              { item: '优惠卷领取数量', count: res.data.coupon_num * 100 },
              { item: '商品销售额', count: res.data.price * 100 },
              { item: '商品获得佣金', count: res.data.commission * 100 }
            ]
            this.pieScale = [
              {
                dataKey: 'percent',
                min: 0,
                formatter: '.0%'
              }
            ]
            const dv = new DataSet.View().source(this.sourceData)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent'
            })
            this.pieData = dv.rows
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    TodayTopInfo () {
      getTodayTopInfo()
        .then(res => {
          this.TodayTopInfoData = res.data
          console.log(this.TodayTopInfoData)
        })
        .catch(res => {})
    }
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
